import React, { useEffect } from 'react'
import { useState } from 'react';
import { Popconfirm } from 'antd';
import { Divider, Radio, Table, Space, Button, Form, Input, message } from 'antd';
import { Drawer } from 'antd';
import { ListApi, addApi, detailApi, searchApi } from '../../../api/user'
import { Modal } from 'antd';
function Index() {
  // 获取列表
  const [list, setList] = useState([])
  const [title, setTitle] = useState('')
  const [sj, setsj] = useState('')
  // 详情
  const [open, setOpen] = useState(false);
  const onClose = () => {
    setOpen(false);
  };
  const xq = async (id) => {
    setOpen(true)
    const res = await detailApi(id)
    console.log(res);
    setsj(res)
  }
  // 删除二次确认
  const confirm = (id) => {
    const del = list.filter((item) => item.id != id)
    setList(del)
    message.success('删除成功');
  };
  const cancel = e => {
    console.log(e);
    message.error('取消删除');
  };
  const getData = async () => {
    const res = await ListApi()
    console.log(res.rows)
    setList(res.rows)
  }
  useEffect(() => {
    getData()
  }, [])
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      render: text => <a>{text}</a>,
    },
    {
      title: '文章内容',
      dataIndex: 'content',
    },
    {
      title: '文章标题',
      dataIndex: 'title',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button onClick={() => xq(record.id)}>详情</Button>
          <Popconfirm
            description="你确定要删除吗?"
            onConfirm={() => confirm(record.id)}
            onCancel={cancel}
            okText="是"
            cancelText="否"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  const [selectionType, setSelectionType] = useState('checkbox');
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: record => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
  // 新增
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const add = () => {
    setIsModalOpen(true)
    setTitle('新增')
  }
  const onFinish = async (values) => {
    console.log('Success:', values);
    const data = {
      title: values.title,//文章标题
      content: values.content,//文章内容
      tagList: ["HTTP"],//标签  array[string]
      categoryList: ["HTTP"],//分类  array[string]
      authorId: 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息
    }
    const res = await addApi(data)
    console.log(res)
    setIsModalOpen(false)
    getData()
  };
  const { Search } = Input;
  const onSearch = async (value) => {
    const res = await searchApi(value)
    console.log(res)
    setList(res.rows)
  }

  return (
    <div>
      <div>
        <Button onClick={add}>新增</Button>
        <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
        <Drawer
          title="详情页"
          closable={{ 'aria-label': 'Close Button' }}
          onClose={onClose}
          open={open}
        >
          <p>{sj.content}</p>
          <p>{sj.title}</p>
          <p>{sj.updatedAt}</p>
        </Drawer>
        <Modal
          title={title}
          closable={{ 'aria-label': 'Custom Close Button' }}
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="content"
              name="content"
              rules={[{ required: true, message: '请输入文章内容' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="title"
              name="title"
              rules={[{ required: true, message: '请输入文章标题' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="id"
              name="id"
              rules={[{ required: true, message: '请输入ID' }]}
            >
              <Input />
            </Form.Item>

            <Form.Item label={null}>
              <Button type="primary" htmlType="submit">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Modal>
        <Table
          rowSelection={Object.assign({ type: selectionType }, rowSelection)}
          columns={columns}
          dataSource={list}
          pagination={{
            total: list.length,
            showSizeChanger: true,
            showQuickJumper: true,
            defaultPageSize: 5,
            showTotal: total => `Total ${total} items`,
          }}
        />
      </div>
    </div>
  )
}

export default Index
